@use "sass:map";

// 定义断点
$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
);

// 媒体查询混入
@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (min-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint `#{$breakpoint}`. Using default values.";
  }
}

// 响应式工具类
.responsive {
  // 移动端样式 (默认)
  padding: 12px;
  font-size: 14px;

  // 小屏幕 (≥576px)
  @include respond-to('sm') {
    padding: 15px;
    font-size: 15px;
  }

  // 中等屏幕 (≥768px)
  @include respond-to('md') {
    padding: 18px;
    font-size: 16px;
  }

  // 大屏幕 (≥992px)
  @include respond-to('lg') {
    padding: 20px;
    font-size: 17px;
  }

  // 超大屏幕 (≥1200px)
  @include respond-to('xl') {
    padding: 24px;
    font-size: 18px;
  }

  // 特大屏幕 (≥1400px)
  @include respond-to('xxl') {
    padding: 28px;
    font-size: 20px;
  }
}

// 响应式显示/隐藏工具类
.hidden {
  &-xs {
    @include respond-to('xs') {
      display: none !important;
    }
  }
  &-sm {
    @include respond-to('sm') {
      display: none !important;
    }
  }
  &-md {
    @include respond-to('md') {
      display: none !important;
    }
  }
  &-lg {
    @include respond-to('lg') {
      display: none !important;
    }
  }
  &-xl {
    @include respond-to('xl') {
      display: none !important;
    }
  }
  &-xxl {
    @include respond-to('xxl') {
      display: none !important;
    }
  }
}

.visible {
  &-xs {
    display: none !important;
    @include respond-to('xs') {
      display: block !important;
    }
  }
  &-sm {
    display: none !important;
    @include respond-to('sm') {
      display: block !important;
    }
  }
  &-md {
    display: none !important;
    @include respond-to('md') {
      display: block !important;
    }
  }
  &-lg {
    display: none !important;
    @include respond-to('lg') {
      display: block !important;
    }
  }
  &-xl {
    display: none !important;
    @include respond-to('xl') {
      display: block !important;
    }
  }
  &-xxl {
    display: none !important;
    @include respond-to('xxl') {
      display: block !important;
    }
  }
}

// 响应式间距工具
@each $size in (0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64) {
  .p-#{$size} {
    padding: #{$size}px !important;
  }
  .pt-#{$size} {
    padding-top: #{$size}px !important;
  }
  .pr-#{$size} {
    padding-right: #{$size}px !important;
  }
  .pb-#{$size} {
    padding-bottom: #{$size}px !important;
  }
  .pl-#{$size} {
    padding-left: #{$size}px !important;
  }
  .m-#{$size} {
    margin: #{$size}px !important;
  }
  .mt-#{$size} {
    margin-top: #{$size}px !important;
  }
  .mr-#{$size} {
    margin-right: #{$size}px !important;
  }
  .mb-#{$size} {
    margin-bottom: #{$size}px !important;
  }
  .ml-#{$size} {
    margin-left: #{$size}px !important;
  }

  // 响应式间距
  @each $breakpoint, $value in $breakpoints {
    .p-#{$breakpoint}-#{$size} {
      @include respond-to($breakpoint) {
        padding: #{$size}px !important;
      }
    }
    .m-#{$breakpoint}-#{$size} {
      @include respond-to($breakpoint) {
        margin: #{$size}px !important;
      }
    }
    // 其他方向同理...
  }
}